<!-- 年规 - 营销规划 - 主页 -->
<template>
  <view>
    <view v-if="data" class="px-3.75 pb-25">
      <view class="py-4">
        <view class="flex c-#999 text-28">
          <view class="flex-1">币种：{{ currencyName }}</view>
          <view class="flex-shrink-0">负责人：{{ data.market_planning?.nickname }}</view>
        </view>
      </view>
      <view v-for="(item, index) in list" :key="index" class="card">
        <view class="indicator" />
        <view class="flex-1 ml-2.5 py-3">
          <view class="text-32 c-#333">
            <text>{{ item.label }}：</text>
            <text class="c-primary">{{ numFormat(totalAmount(item)) }}W
            </text>
          </view>
          <view class="grid grid-cols-3 gap-2 mt-3">
            <view v-for="(child, cIndex) in item.list" :key="cIndex" class="mb-2">
              <view class="text-40 c-#333">{{ numFormat(child.value || 0) }}{{ child.unit }}</view>
              <view class="text-24 c-#999 mt-1">{{ child.label }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="h-800 flex flex-col justify-center items-center">
      <z-empty imgWidth="200" imgHeight="200" descText="暂无数据" />
    </view>
    <view v-if="isSocietyManager || isPlanManager" class="bottom-wrap-16 px-3.75 bg-white" @click="emit('edit')">
      <view class="btn-primary_plain">编辑</view>
    </view>
  </view>
</template>
<script setup>
import { numFormat } from '@/common/util/format'
import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const planStore = usePlanStore()
const userStore = useUserStore()

const emit = defineEmits(['edit'])

const props = defineProps({
  data: Object
})
const list = ref([
  {
    label: '市场拓展投入（万）',
    list: [
      { label: '参展投入', prop: 'exhibition_input', value: '' },
      { label: '拜访投入', prop: 'visiting_input', value: '' },
    ]
  },
  {
    label: '阿里国际站投入（万）',
    list: [
      { label: '金品', prop: 'gold_objects', value: '' },
      { label: '出口通', prop: 'outlet_port', value: '' },
      { label: '行业领袖PRO', prop: 'industry_leader', value: '' },
      { label: 'P4P投入(年)', prop: 'p4p_input', value: '' },
      { label: '顶展年投入', prop: 'top_exhibition_input', value: '' },
      { label: '问鼎年投入', prop: 'tripod_input', value: '' },
    ]
  },
  {
    label: '其他投入（万）',
    list: [
      { label: '官网投入(万)', prop: 'website_input', value: '', unit: 'W' },
      { label: '营销工具投入(万)', prop: 'marketing_tool_input', value: '', unit: 'W' },
      { label: '客户管理工具 投入(万)', prop: 'customer_tool_input', value: '', unit: 'W' },
      { label: '自建站投入(万)', prop: 'self_station_input', value: '', unit: 'W' },
      { label: '社交平台投入(万)', prop: 'social_platform_input', value: '', unit: 'W' },
      { label: '询盘目标数 (线上+线下)', prop: 'enquiries_number', value: '', unit: '' },
      { label: '询盘转化率', prop: 'enquiries_rate', value: '', unit: '%' },
    ]
  }
])

const currencyName = computed(() => planStore.currency?.label || '未添加')
const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)
const isPlanManager = computed(() => userStore.userInfo.id == props.data?.market_planning?.id)
const totalAmount = computed(() => (target) => target.list.reduce((total, item, index) => {
  if (index < 5) { total += Number(item.value || 0) }
  return total
}, 0))

watch(() => props.data, (val) => initData(val))

function initData(data) {
  if (!data) return
  list.value.forEach(item => {
    item.list.forEach(child => {
      child.value = data[child.prop]
    })
  })
}

onMounted(() => initData(props.data))
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.card {
  display: flex;
  align-items: stretch;
  margin-bottom: 30rpx;
  padding-right: 26rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -2rpx 4rpx 12rpx 2rpx rgba(206, 143, 12, 0.1);
  overflow: hidden;

  .indicator {
    width: 8rpx;
    border-radius: 5rpx 0px 5rpx 0px;
    background-color: #F4AF22;
  }
}
</style>
